<template>
  <x-page class="x-page-songLists">
    <x-header title="排行榜" />
    <card class="info_box">
      <div slot="content" class="album">
        <!--{{topInfo.pic_album}}-->
        <div class="album__media">
          <x-img class="album__cover" :src="topInfo.pic" />
        </div>
        <div class="album__bd">
          <h1 class="album__name">{{topInfo.ListName}}</h1>
          <p class="album__desc">第 {{topInfo.day_of_year}} 天</p>
          <p class="album__desc">{{topInfo.update_time}} 更新</p>
        </div>
      </div>
      <div slot="footer" class="opt_box">
        <x-button type="primary" class="custom-primary">播放全部</x-button>
      </div>
    </card>

    <div class="main">
      <group :title="`排行榜  共${songList.length}首`">
        <x-item>111</x-item>
        <cell-box is-link class="lists_item" v-for="(item, index) in songList" :key="index" :link="`/play/${item.data.songid}`">
          <div class="lists_item_order">
            <span class="lists_item_decimal" :class="{'hot': index < 3}">{{index +1}}</span>
          </div>
          <div class="lists_item_box">
            <h3 class="lists_item_title">{{item.data.songname}}</h3>
            <p class="lists_item_auther" v-if="item.data.singer.length">
              <span v-for="(singer, index) in item.data.singer">{{singer.name}}</span></p>
          </div>
        </cell-box>
      </group>
    </div>
  </x-page>
</template>

<script>
import { XHeader, Card, AjaxPlugin, XImg, XButton, Divider, Group, CellBox } from 'vux'
export default {
  name: 'songLists',
  components: { XHeader, Card, AjaxPlugin, XImg, XButton, Divider, Group, CellBox },
  data(){
    return {
      topInfo: {},
      songList: [],
      params: {
        topid: parseInt(this.$route.params.pid),
        page: 'detail',
        g_tk: 1928093487,
        loginUin: 411985844,
        hostUin: 0,
        format: 'json',
        inCharset: 'utf8',
        outCharset: 'utf-8',
        notice: 0,
        platform: 'yqq',
        needNewCode: 0,
        type: 'top',
        tpl: 3
      }
    }
  },
  methods: {
    querySongLists(){
      let url = `${this.HOST}/v8/fcg-bin/fcg_v8_toplist_cp.fcg`
      AjaxPlugin.$http.get(url, {params: this.params}).then(res => {
        if (res && res.status === 200){
          let response = res.data
          this.topInfo = response.topinfo
          this.topInfo.update_time = response.update_time
          this.topInfo.day_of_year = response.day_of_year
          this.songList = response.songlist
        }
        // console.log(res)
      }).catch(e => {
        console.log(e.message)
      })
    }
  },
  created() {
    this.querySongLists()
  }
}
</script>
